<template>
  <div class="register-form">
    <el-form ref="registerFormRef" autocomplete="on" :model="registerForm" label-position="left">
      <h2 class="register-title color-main">MedBox科研导航</h2>
      <el-form-item prop="username" :rules="{
        required: true,
        trigger: 'blur',
        message: '请输入用户名',
      }">
        <el-input v-model="registerForm.username" clearable name="username" type="text" autocomplete="on"
          placeholder="请输入用户名" :prefix-icon="User" />
      </el-form-item>
      <el-form-item prop="email" :rules="{
        required: true,
        trigger: 'blur',
        type: 'email',
        message: '请输入正确的邮箱',
      }">
        <el-input v-model="registerForm.email" clearable name="email" type="text" autocomplete="on" placeholder="请输入邮箱"
          :prefix-icon="Message" />
      </el-form-item>
      <el-form-item prop="password" :rules="[
        { required: true, trigger: 'blur', message: '请输入密码' },
        {
          min: 6,
          max: 18,
          message: '密码长度在6到18个字符',
          trigger: 'blur',
        },
      ]">
        <el-input v-model="registerForm.password" clearable name="password" type="password" autocomplete="on"
          minlength="6" maxlength="18" placeholder="请输入密码" show-password :prefix-icon="Key" />
      </el-form-item>
      <el-form-item prop="checkPass" :rules="{
        validator: validateCheckPass,
        trigger: 'blur',
      }">
        <el-input v-model="registerForm.checkPass" clearable name="password" type="password" autocomplete="on"
          minlength="6" maxlength="18" placeholder="请再次输入密码" show-password :prefix-icon="Key" />
      </el-form-item>
      <el-form-item class="register-btns">
        <el-button type="primary" :loading="loading" @click.prevent="handleRegister(registerFormRef)">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { open } from '@/api/open'
import { setToken } from '@/utils/auth'
import { Key, Message, User } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
const validateCheckPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}
interface IRegisterForm {
  username: string
  password: string
  email: string
  checkPass: string
}

const registerFormRef = ref<FormInstance>()
const registerForm = reactive<IRegisterForm>({
  username: '',
  email: '',
  password: '',
  checkPass: ''
})
const loading = ref(false)

const handleRegister = async (
  formEl: FormInstance | undefined
): Promise<void> => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      loading.value = true
      register()
    } else {
      console.log('参数验证不合法！')
      return false
    }
  })
}
const register = async () => {
  try {
    const res = await open.user.register({
      userName: registerForm.username,
      email: registerForm.email,
      password: registerForm.password
    })
    loading.value = false
    ElMessage({
      message: res.message,
      type: res.code === 0 ? 'success' : 'error',
      duration: 2 * 1000
    })
    res.data && setToken(res.data)
    window.location.href = '/'
  } catch (err) {
    loading.value = false
  }
}
</script>
<style lang="scss" scoped>
.register-form {
  margin: 30px;

  .register-title {
    text-align: center;
    font-size: 25px;
    margin: 0 0 35px;
  }

  .register-center-layout {
    background: #409eff;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }

  .codeTipText {
    margin-top: -15px;
    font-size: 14px;
    margin-bottom: 5px;
    text-align: left;
    cursor: pointer;
  }

  h3 {
    margin: 10px 0 20px;
  }

  .register-btns {
    margin-bottom: 40px;
    text-align: center;

    .el-button {
      width: 100%;
    }
  }
}
</style>
